<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="vue.js"></script>
    <div id="root">
        姓名：<input type="text" v-model="name"><br>

        性别：<input type="radio" v-model="gender" value="male" id="male">
        <label for="male">男</label>
        <input type="radio" v-model="gender" value="female">
        <label for="female">女</label>
        <br>

        爱好：<label :for="item" v-for="(item, index) in hobbies" :key="index">
        <input type="checkbox" v-model="myhobbies" :id="item" :value="item" >{{item}}
        </label>
        <br>

        职业：<select v-model="profession">
            <option value="boss">老板</option>
            <option value="engineer">软件工程师</option>
            <option value="lawyer">律师</option>
            <option value="teacher">教师</option>
        </select>
        <br>

        个人简介：<textarea v-model="te" cols="30" rows="10"></textarea>
        <br>

        年龄：<input type="text" v-model="age">
        <br>

        城市：<select v-model="city" >
            <option value="">请选择城市</option>
            <option value="厦门">厦门</option>
            <option value="龙岩">龙岩</option>
            <option value="漳州">漳州</option>
            <option value="福州">福州</option>
        </select>
        <br>

        <input type="checkbox" v-model="isagree" id="agree">
        <label for="agree">同意协议</label>
        <button :disabled="isagree==false">提交</button>


        <p>您的个人信息是：</p>
        <p>用户名-{{name}} 年龄-{{age}} 性别-{{gender}} 爱好-{{myhobbies}} 职业-{{profession}}
            自我介绍-{{te}} 城市-{{city}}
        </p>

    </div>


    <script>
        new Vue({
            el:"#root",
            data:{
                isagree:false,
                city:"",
                age:"",
                te:"哈哈哈",
                profession:"",
                myhobbies:[],
                hobbies:["篮球","唱歌","写代码"],
                name:"",
                gender:"",
            }
        })
    </script>

    
</body>
</html>